<template>
	<view class="u-page">
		<view class="login_box">
			<uni-icons type="staff-filled" size="80" color="#F4025C"></uni-icons>
			<uni-forms ref="baseForm" :modelValue="loginFrom" :rules="rules">
				<uni-forms-item name="account" :label="labelName" required>
					<uni-easyinput type="text" v-model="loginFrom.account" :placeholder="placeholder" />
				</uni-forms-item>
				<uni-forms-item name="pwd" :label="labelPwd" required>
					<uni-easyinput type="password" v-model="loginFrom.pwd" :placeholder="placeholder" />
				</uni-forms-item>
			</uni-forms>
		</view>


		<button class="login_btn" type="primary" @click="submit" :loading="loading"> {{ $t('common.Login') }}</button>
	</view>
</template>

<script>
	import {
		adminLogin
	} from '@/api/api.js'
	import {
		mapGetters,
	} from 'vuex'
	export default {
		data() {
			return {
				// 是否显示获取头像昵称按钮
				loginFrom: {
					account: "account", //account
					pwd: "123456" //123456
				},
				rules: {
					account: {
						rules: [{
							required: true,
							errorMessage: this.$t('common.PleaseEnter'),
						}]
					},
					pwd: {
						rules: [{
							required: true,
							errorMessage: this.$t('common.PleaseEnter'),
						}]
					}
				},
				loading: false,
			}
		},
		computed: {
			...mapGetters([
				'userInfo',"locales"
			]),
			labelName() {
				return this.$t('common.Name');
			},
			labelPwd() {
				return this.$t('common.Pwd');
			},
			placeholder() {
				return this.$t('common.PleaseEnter');
			},
		},
		onLoad() {},
		methods: {
			submit() {
				// 在 onLoad 生命周期中，formData添加了一个 id 字段 ，此时这个字段是不参数校验的，所以结果中不返回
				// 在 validate(['id']) 方法中，指定第一个参数 ，即可返回id字段
				this.$refs.baseForm.validate().then(res => {
					adminLogin(res).then(res => {
						this.$store.commit('user/set_userInfo', res)
						this.$store.commit('user/set_locales', this.locales)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		margin-top: 20%;
		display: flex;
		flex-direction: column;
		gap: 100rpx;
	}

	.login_btn {
		width: 80%;
		height: 100rpx;
		line-height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -40rpx;
		margin: auto;
	}
</style>